﻿<template>
    <elm-page-bb>
        <el-form ref="model" :model="model" size="small" label-width="70px">
          <elm-row>
            <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '名称必须填写'}]">
              <el-input type="name" v-model="model.name"></el-input>
            </el-form-item>
            <el-form-item label="上级">
              <elm-select-tree v-model="model.pid" url="/system/menu/GetTree" path-url="/system/menu/GetPath"></elm-select-tree>
            </el-form-item>
          </elm-row>
            <el-form-item label="路径">
                <el-input v-model="model.navigateurl"></el-input>
            </el-form-item>
          <elm-row>
            <el-form-item label="顺序" prop="sort" :rules="[{ required: true, message: '顺序必须填写'},{ type: 'number', message: '顺序必须为数字'}]">
              <el-input v-model.number="model.sort"></el-input>
            </el-form-item>
            <el-form-item label="图标">
              <el-select v-model="model.icon" placeholder="请选择" style="width: calc(100% - 14px)" >
                <el-option v-for="item in icons" :key="item.value" :label="item.text" :value="item.value">
                  <span style="float: left">{{ item.text }}</span>
                  <span style="float: right;"><li :class="item.value"></li></span>
                </el-option>
              </el-select>
              <i :class="model.icon" style="color:#65ce81"></i>
            </el-form-item>
          </elm-row>
          <el-form-item label="打开方式" prop="sort">
            <el-select v-model="model.target" placeholder="打开方式">
              <el-option key="默认" label="默认" value=""></el-option>
              <el-option key="新页面" label="新页面" value="blank"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="model.remark" :rows="2"></el-input>
          </el-form-item>
        </el-form>
        <template #bottom>
            <el-button type="success" size="small" @click="submit" model.>立即保存</el-button>
            <el-button size="small" @click="close">取消</el-button>
        </template>
    </elm-page-bb>
</template>

<script>
    export default {
        extends: elmVueBase,
        data() {
            return {
              model: {
                pid: elm.dialog.request.pid,
                target:""
              },
                icons: [
                    { text: "el-icon-platform-eleme", value: "el-icon-platform-eleme" },
                    { text: "el-icon-delete-solid", value: "el-icon-delete-solid" },
                    { text: "el-icon-eleme", value: "el-icon-eleme" },
                    { text: "el-icon-c-scale-to-original", value: "el-icon-c-scale-to-original" },
                    { text: "el-icon-sort-up", value: "el-icon-sort-up" },
                    { text: "el-icon-sort-down", value: "el-icon-sort-down" },
                    { text: "el-icon-upload", value: "el-icon-upload" },
                    { text: "el-icon-goods", value: "el-icon-goods" },
                    { text: "el-icon-video-pause", value: "el-icon-video-pause" },
                    { text: "el-icon-video-play", value: "el-icon-video-play" },
                    { text: "el-icon-s-cooperation", value: "el-icon-s-cooperation" },
                    { text: "el-icon-s-order", value: "el-icon-s-order" },
                    { text: "el-icon-s-platform", value: "el-icon-s-platform" },
                    { text: "el-icon-s-unfold", value: "el-icon-s-unfold" },
                    { text: "el-icon-s-operation", value: "el-icon-s-operation" },
                    { text: "el-icon-s-promotion", value: "el-icon-s-promotion" },
                    { text: "el-icon-s-home", value: "el-icon-s-home" },
                    { text: "el-icon-s-release", value: "el-icon-s-release" },
                    { text: "el-icon-s-ticket", value: "el-icon-s-ticket" },
                    { text: "el-icon-s-management", value: "el-icon-s-management" },
                    { text: "el-icon-s-open", value: "el-icon-s-open" },
                    { text: "el-icon-s-shop", value: "el-icon-s-shop" },
                    { text: "el-icon-s-help", value: "el-icon-s-help" },
                    { text: "el-icon-s-goods", value: "el-icon-s-goods" },
                    { text: "el-icon-s-marketing", value: "el-icon-s-marketing" },
                    { text: "el-icon-s-flag", value: "el-icon-s-flag" },
                    { text: "el-icon-s-comment", value: "el-icon-s-comment" },
                    { text: "el-icon-s-finance", value: "el-icon-s-finance" },
                    { text: "el-icon-s-claim", value: "el-icon-s-claim" },
                    { text: "el-icon-s-tools", value: "el-icon-s-tools" },
                    { text: "el-icon-s-custom", value: "el-icon-s-custom" },
                    { text: "el-icon-s-opportunity", value: "el-icon-s-opportunity" },
                    { text: "el-icon-s-fold", value: "el-icon-s-fold" },
                    { text: "el-icon-s-data", value: "el-icon-s-data" },
                    { text: "el-icon-s-check", value: "el-icon-s-check" },
                    { text: "el-icon-s-grid", value: "el-icon-s-grid" },
                    { text: "el-icon-user-solid", value: "el-icon-user-solid" },
                    { text: "el-icon-question", value: "el-icon-question" },
                    { text: "el-icon-warning", value: "el-icon-warning" },
                    { text: "el-icon-remove", value: "el-icon-remove" },
                    { text: "el-icon-info", value: "el-icon-info" },
                    { text: "el-icon-circle-plus", value: "el-icon-circle-plus" },
                    { text: "el-icon-picture", value: "el-icon-picture" },
                    { text: "el-icon-location", value: "el-icon-location" },
                    { text: "el-icon-error", value: "el-icon-error" },
                    { text: "el-icon-success", value: "el-icon-success" },
                    { text: "el-icon-camera-solid", value: "el-icon-camera-solid" },
                    { text: "el-icon-d-caret", value: "el-icon-d-caret" },
                    { text: "el-icon-message-solid", value: "el-icon-message-solid" },
                    { text: "el-icon-menu", value: "el-icon-menu" },
                    { text: "el-icon-star-on", value: "el-icon-star-on" },
                    { text: "el-icon-video-camera-solid", value: "el-icon-video-camera-solid" },
                    { text: "el-icon-phone", value: "el-icon-phone" },
                    { text: "el-icon-more", value: "el-icon-more" },
                    { text: "el-icon-share", value: "el-icon-share" },
                    { text: "el-icon-caret-left", value: "el-icon-caret-left" },
                    { text: "el-icon-caret-right", value: "el-icon-caret-right" },
                    { text: "el-icon-caret-bottom", value: "el-icon-caret-bottom" },
                    { text: "el-icon-caret-top", value: "el-icon-caret-top" },
                    { text: "el-icon-date", value: "el-icon-date" },
                    { text: "el-icon-circle-close", value: "el-icon-circle-close" },
                    { text: "el-icon-edit", value: "el-icon-edit" },
                    { text: "el-icon-folder", value: "el-icon-folder" },
                    { text: "el-icon-folder-opened", value: "el-icon-folder-opened" },
                    { text: "el-icon-folder-add", value: "el-icon-folder-add" },
                    { text: "el-icon-folder-remove", value: "el-icon-folder-remove" },
                    { text: "el-icon-folder-delete", value: "el-icon-folder-delete" },
                    { text: "el-icon-folder-checked", value: "el-icon-folder-checked" },
                    { text: "el-icon-tickets", value: "el-icon-tickets" },
                    { text: "el-icon-document-remove", value: "el-icon-document-remove" },
                    { text: "el-icon-document-delete", value: "el-icon-document-delete" },
                    { text: "el-icon-document-copy", value: "el-icon-document-copy" },
                    { text: "el-icon-document-checked", value: "el-icon-document-checked" },
                    { text: "el-icon-document", value: "el-icon-document" },
                    { text: "el-icon-document-add", value: "el-icon-document-add" },
                    { text: "el-icon-printer", value: "el-icon-printer" },
                    { text: "el-icon-paperclip", value: "el-icon-paperclip" },
                    { text: "el-icon-download", value: "el-icon-download" },
                    { text: "el-icon-upload2", value: "el-icon-upload2" },
                    { text: "el-icon-takeaway-box", value: "el-icon-takeaway-box" },
                    { text: "el-icon-camera", value: "el-icon-camera" },
                    { text: "el-icon-search", value: "el-icon-search" },
                    { text: "el-icon-zoom-in", value: "el-icon-zoom-in" },
                    { text: "el-icon-zoom-out", value: "el-icon-zoom-out" },
                    { text: "el-icon-monitor", value: "el-icon-monitor" },
                    { text: "el-icon-attract", value: "el-icon-attract" },
                    { text: "el-icon-mobile", value: "el-icon-mobile" },
                    { text: "el-icon-video-camera", value: "el-icon-video-camera" },
                    { text: "el-icon-scissors", value: "el-icon-scissors" },
                    { text: "el-icon-umbrella", value: "el-icon-umbrella" },
                    { text: "el-icon-headset", value: "el-icon-headset" },
                    { text: "el-icon-brush", value: "el-icon-brush" },
                    { text: "el-icon-data-line", value: "el-icon-data-line" },
                    { text: "el-icon-mouse", value: "el-icon-mouse" },
                    { text: "el-icon-coordinate", value: "el-icon-coordinate" },
                    { text: "el-icon-magic-stick", value: "el-icon-magic-stick" },
                    { text: "el-icon-reading", value: "el-icon-reading" },
                    { text: "el-icon-data-board", value: "el-icon-data-board" },
                    { text: "el-icon-pie-chart", value: "el-icon-pie-chart" },
                    { text: "el-icon-data-analysis", value: "el-icon-data-analysis" },
                    { text: "el-icon-collection-tag", value: "el-icon-collection-tag" },
                    { text: "el-icon-edit-outline", value: "el-icon-edit-outline" },
                    { text: "el-icon-film", value: "el-icon-film" },
                    { text: "el-icon-suitcase", value: "el-icon-suitcase" },
                    { text: "el-icon-suitcase-1", value: "el-icon-suitcase-1" },
                    { text: "el-icon-picture-outline-round", value: "el-icon-picture-outline-round" },
                    { text: "el-icon-picture-outline", value: "el-icon-picture-outline" },
                    { text: "el-icon-receiving", value: "el-icon-receiving" },
                    { text: "el-icon-collection", value: "el-icon-collection" },
                    { text: "el-icon-files", value: "el-icon-files" },
                    { text: "el-icon-notebook-1", value: "el-icon-notebook-1" },
                    { text: "el-icon-notebook-2", value: "el-icon-notebook-2" },
                    { text: "el-icon-toilet-paper", value: "el-icon-toilet-paper" },
                    { text: "el-icon-office-building", value: "el-icon-office-building" },
                    { text: "el-icon-school", value: "el-icon-school" },
                    { text: "el-icon-table-lamp", value: "el-icon-table-lamp" },
                    { text: "el-icon-house", value: "el-icon-house" },
                    { text: "el-icon-no-smoking", value: "el-icon-no-smoking" },
                    { text: "el-icon-smoking", value: "el-icon-smoking" },
                    { text: "el-icon-shopping-cart-full", value: "el-icon-shopping-cart-full" },
                    { text: "el-icon-shopping-cart-1", value: "el-icon-shopping-cart-1" },
                    { text: "el-icon-shopping-cart-2", value: "el-icon-shopping-cart-2" },
                    { text: "el-icon-shopping-bag-1", value: "el-icon-shopping-bag-1" },
                    { text: "el-icon-shopping-bag-2", value: "el-icon-shopping-bag-2" },
                    { text: "el-icon-present", value: "el-icon-present" },
                    { text: "el-icon-box", value: "el-icon-box" },
                    { text: "el-icon-bank-card", value: "el-icon-bank-card" },
                    { text: "el-icon-money", value: "el-icon-money" },
                    { text: "el-icon-coin", value: "el-icon-coin" },
                    { text: "el-icon-wallet", value: "el-icon-wallet" },
                    { text: "el-icon-discount", value: "el-icon-discount" },
                    { text: "el-icon-price-tag", value: "el-icon-price-tag" },
                    { text: "el-icon-bicycle", value: "el-icon-bicycle" },
                    { text: "el-icon-truck", value: "el-icon-truck" },
                    { text: "el-icon-ship", value: "el-icon-ship" },
                    { text: "el-icon-news", value: "el-icon-news" },
                    { text: "el-icon-help", value: "el-icon-help" },
                    { text: "el-icon-guide", value: "el-icon-guide" },
                    { text: "el-icon-male", value: "el-icon-male" },
                    { text: "el-icon-female", value: "el-icon-female" },
                    { text: "el-icon-thumb", value: "el-icon-thumb" },
                    { text: "el-icon-cpu", value: "el-icon-cpu" },
                    { text: "el-icon-link", value: "el-icon-link" },
                    { text: "el-icon-connection", value: "el-icon-connection" },
                    { text: "el-icon-open", value: "el-icon-open" },
                    { text: "el-icon-turn-off", value: "el-icon-turn-off" },
                    { text: "el-icon-set-up", value: "el-icon-set-up" },
                    { text: "el-icon-chat-round", value: "el-icon-chat-round" },
                    { text: "el-icon-chat-line-round", value: "el-icon-chat-line-round" },
                    { text: "el-icon-chat-square", value: "el-icon-chat-square" },
                    { text: "el-icon-chat-dot-round", value: "el-icon-chat-dot-round" },
                    { text: "el-icon-chat-dot-square", value: "el-icon-chat-dot-square" },
                    { text: "el-icon-chat-line-square", value: "el-icon-chat-line-square" },
                    { text: "el-icon-message", value: "el-icon-message" },
                    { text: "el-icon-postcard", value: "el-icon-postcard" },
                    { text: "el-icon-position", value: "el-icon-position" },
                    { text: "el-icon-turn-off-microphone", value: "el-icon-turn-off-microphone" },
                    { text: "el-icon-microphone", value: "el-icon-microphone" },
                    { text: "el-icon-close-notification", value: "el-icon-close-notification" },
                    { text: "el-icon-bell", value: "el-icon-bell" },
                    { text: "el-icon-bangzhu", value: "el-icon-bangzhu" },
                    { text: "el-icon-circle-plus-outline", value: "el-icon-circle-plus-outline" },
                    { text: "el-icon-remove-outline", value: "el-icon-remove-outline" },
                    { text: "el-icon-circle-check", value: "el-icon-circle-check" },
                    { text: "el-icon-time", value: "el-icon-time" },
                    { text: "el-icon-odometer", value: "el-icon-odometer" },
                    { text: "el-icon-crop", value: "el-icon-crop" },
                    { text: "el-icon-aim", value: "el-icon-aim" },
                    { text: "el-icon-switch-button", value: "el-icon-switch-button" },
                    { text: "el-icon-full-screen", value: "el-icon-full-screen" },
                    { text: "el-icon-copy-document", value: "el-icon-copy-document" },
                    { text: "el-icon-star-off", value: "el-icon-star-off" },
                    { text: "el-icon-basketball", value: "el-icon-basketball" },
                    { text: "el-icon-football", value: "el-icon-football" },
                    { text: "el-icon-soccer", value: "el-icon-soccer" },
                    { text: "el-icon-baseball", value: "el-icon-baseball" },
                    { text: "el-icon-mic", value: "el-icon-mic" },
                    { text: "el-icon-stopwatch", value: "el-icon-stopwatch" },
                    { text: "el-icon-medal-1", value: "el-icon-medal-1" },
                    { text: "el-icon-medal", value: "el-icon-medal" },
                    { text: "el-icon-trophy", value: "el-icon-trophy" },
                    { text: "el-icon-trophy-1", value: "el-icon-trophy-1" },
                    { text: "el-icon-first-aid-kit", value: "el-icon-first-aid-kit" },
                    { text: "el-icon-discover", value: "el-icon-discover" },
                    { text: "el-icon-place", value: "el-icon-place" },
                    { text: "el-icon-location-outline", value: "el-icon-location-outline" },
                    { text: "el-icon-location-information", value: "el-icon-location-information" },
                    { text: "el-icon-add-location", value: "el-icon-add-location" },
                    { text: "el-icon-delete-location", value: "el-icon-delete-location" },
                    { text: "el-icon-map-location", value: "el-icon-map-location" },
                    { text: "el-icon-alarm-clock", value: "el-icon-alarm-clock" },
                    { text: "el-icon-timer", value: "el-icon-timer" },
                    { text: "el-icon-watch-1", value: "el-icon-watch-1" },
                    { text: "el-icon-watch", value: "el-icon-watch" },
                    { text: "el-icon-wind-power", value: "el-icon-wind-power" },
                    { text: "el-icon-light-rain", value: "el-icon-light-rain" },
                    { text: "el-icon-lightning", value: "el-icon-lightning" },
                    { text: "el-icon-heavy-rain", value: "el-icon-heavy-rain" },
                    { text: "el-icon-sunrise", value: "el-icon-sunrise" },
                    { text: "el-icon-sunrise-1", value: "el-icon-sunrise-1" },
                    { text: "el-icon-sunset", value: "el-icon-sunset" },
                    { text: "el-icon-sunny", value: "el-icon-sunny" },
                    { text: "el-icon-cloudy", value: "el-icon-cloudy" },
                    { text: "el-icon-partly-cloudy", value: "el-icon-partly-cloudy" },
                    { text: "el-icon-cloudy-and-sunny", value: "el-icon-cloudy-and-sunny" },
                    { text: "el-icon-moon", value: "el-icon-moon" },
                    { text: "el-icon-moon-night", value: "el-icon-moon-night" },
                    { text: "el-icon-bottom-left", value: "el-icon-bottom-left" },
                    { text: "el-icon-bottom-right", value: "el-icon-bottom-right" },
                    { text: "el-icon-bottom", value: "el-icon-bottom" },
                    { text: "el-icon-back", value: "el-icon-back" },
                    { text: "el-icon-right", value: "el-icon-right" },
                    { text: "el-icon-top-left", value: "el-icon-top-left" },
                    { text: "el-icon-top-right", value: "el-icon-top-right" },
                    { text: "el-icon-top", value: "el-icon-top" },
                    { text: "el-icon-lock", value: "el-icon-lock" },
                    { text: "el-icon-unlock", value: "el-icon-unlock" },
                    { text: "el-icon-user", value: "el-icon-user" },
                    { text: "el-icon-key", value: "el-icon-key" },
                    { text: "el-icon-arrow-up", value: "el-icon-arrow-up" },
                    { text: "el-icon-arrow-right", value: "el-icon-arrow-right" },
                    { text: "el-icon-arrow-down", value: "el-icon-arrow-down" },
                    { text: "el-icon-arrow-left", value: "el-icon-arrow-left" },
                    { text: "el-icon-d-arrow-left", value: "el-icon-d-arrow-left" },
                    { text: "el-icon-d-arrow-right", value: "el-icon-d-arrow-right" },
                    { text: "el-icon-close", value: "el-icon-close" },
                    { text: "el-icon-check", value: "el-icon-check" },
                    { text: "el-icon-plus", value: "el-icon-plus" },
                    { text: "el-icon-minus", value: "el-icon-minus" },
                    { text: "el-icon-delete", value: "el-icon-delete" },
                    { text: "el-icon-sold-out", value: "el-icon-sold-out" },
                    { text: "el-icon-sell", value: "el-icon-sell" },
                    { text: "el-icon-service", value: "el-icon-service" },
                    { text: "el-icon-mobile-phone", value: "el-icon-mobile-phone" },
                    { text: "el-icon-sort", value: "el-icon-sort" },
                    { text: "el-icon-rank", value: "el-icon-rank" },
                    { text: "el-icon-refresh", value: "el-icon-refresh" },
                    { text: "el-icon-loading", value: "el-icon-loading" },
                    { text: "el-icon-view", value: "el-icon-view" },
                    { text: "el-icon-finished", value: "el-icon-finished" },
                    { text: "el-icon-more-outline", value: "el-icon-more-outline" },
                    { text: "el-icon-phone-outline", value: "el-icon-phone-outline" },
                    { text: "el-icon-setting", value: "el-icon-setting" },
                    { text: "el-icon-warning-outline", value: "el-icon-warning-outline" },
                    { text: "el-icon-refresh-right", value: "el-icon-refresh-right" },
                    { text: "el-icon-refresh-left", value: "el-icon-refresh-left" },
                    { text: "el-icon-dish", value: "el-icon-dish" },
                    { text: "el-icon-dish-1", value: "el-icon-dish-1" },
                    { text: "el-icon-food", value: "el-icon-food" },
                    { text: "el-icon-chicken", value: "el-icon-chicken" },
                    { text: "el-icon-fork-spoon", value: "el-icon-fork-spoon" },
                    { text: "el-icon-knife-fork", value: "el-icon-knife-fork" },
                    { text: "el-icon-burger", value: "el-icon-burger" },
                    { text: "el-icon-tableware", value: "el-icon-tableware" },
                    { text: "el-icon-sugar", value: "el-icon-sugar" },
                    { text: "el-icon-dessert", value: "el-icon-dessert" },
                    { text: "el-icon-ice-cream", value: "el-icon-ice-cream" },
                    { text: "el-icon-hot-water", value: "el-icon-hot-water" },
                    { text: "el-icon-water-cup", value: "el-icon-water-cup" },
                    { text: "el-icon-coffee-cup", value: "el-icon-coffee-cup" },
                    { text: "el-icon-cold-drink", value: "el-icon-cold-drink" },
                    { text: "el-icon-goblet", value: "el-icon-goblet" },
                    { text: "el-icon-goblet-full", value: "el-icon-goblet-full" },
                    { text: "el-icon-goblet-square", value: "el-icon-goblet-square" },
                    { text: "el-icon-goblet-square-full", value: "el-icon-goblet-square-full" },
                    { text: "el-icon-refrigerator", value: "el-icon-refrigerator" },
                    { text: "el-icon-grape", value: "el-icon-grape" },
                    { text: "el-icon-watermelon", value: "el-icon-watermelon" },
                    { text: "el-icon-cherry", value: "el-icon-cherry" },
                    { text: "el-icon-apple", value: "el-icon-apple" },
                    { text: "el-icon-pear", value: "el-icon-pear" },
                    { text: "el-icon-orange", value: "el-icon-orange" },
                    { text: "el-icon-coffee", value: "el-icon-coffee" },
                    { text: "el-icon-ice-tea", value: "el-icon-ice-tea" },
                    { text: "el-icon-ice-drink", value: "el-icon-ice-drink" },
                    { text: "el-icon-milk-tea", value: "el-icon-milk-tea" },
                    { text: "el-icon-potato-strips", value: "el-icon-potato-strips" },
                    { text: "el-icon-lollipop", value: "el-icon-lollipop" },
                    { text: "el-icon-ice-cream-square", value: "el-icon-ice-cream-square" },
                    { text: "el-icon-ice-cream-round", value: "el-icon-ice-cream-round" },
                    { text: "", value: "" }]
            }
        },
        created() {
          if(this.model.target==null)
          {
            this.model.target="";
          }
        },
        methods: {
            async submit() {
                await this.$refs["model"].validate();
                var res = await elm.post('/system/menu/Upsert', this.model);
                if (res == true) {
                    this.close();
                    this.v('保存成功。');
                    this.request.callVue.treebinding();
                  var res = await this.post('/system/login/GetUserMenu');
                  elm.main.vue.menuData=elm.info.menu = res;
                }
                else {
                    this.error('保存失败，请稍后尝试。');
                }
            }
        }
    }
</script>

<style scoped>
</style>